<template>
  <el-dialog title="添加班级" :visible.sync="dialogVisible" width="1000px" :close-on-click-modal="false"
    :modal-append-to-body="false" v-drag2anywhere>
    <el-form :model="formData" ref="formData" size="mini" label-width="90px" :rules="rules">
      <el-row :gutter="30">
        <el-col>
          <div class="title">基本信息</div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级名称" prop="title">
            <el-input v-model="formData.title" placeholder="班级名称"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="班级容量:" prop="capacity"  >
              <el-input-number v-model="formData.capacity" style="width:160px;" :step="1"
                placeholder="请输入数量"></el-input-number>
          </el-form-item>
        </el-col>

        <el-col style="clear: both;">
          <el-form-item label="关联课程">
            <div style="text-align: right; margin: 2px 0px;">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handlePopupCourse" >关联课程</el-button>
            </div>
            <el-table :data="formData.courses" border>
              <el-table-column label="序号" type="index" align="center"></el-table-column>
              <el-table-column label="课程名称" prop="title"></el-table-column>
              <el-table-column label="授课方式" prop="type">
                <template v-slot="scope">
                  {{scope.row.type=='1'? "一对多":(scope.row.type=='2'?"一对一":"预约课")}}
                  </template>
              </el-table-column>
              <el-table-column label="操作" width="150px" align="center">
                <template v-slot="scope">
                  <el-button type="danger" icon="el-icon-delete" title="删除课程" @click="handleDeleteCourse(scope.$index,scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="授课教师">
            <el-select v-model="teacher_ids" filterable multiple placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in teachers"
                  :key="item.tid"
                  :label="item.name"
                  :value="item.tid">
                </el-option>
              </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="上课教室">
            <el-input v-model="formData.room" placeholder="上课教室"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="备注">
            <el-input type="textarea" :rows="5" :maxlength="500" show-word-limit v-model="formData.memo"
              placeholder="备注"></el-input>
          </el-form-item>
        </el-col>

        <el-col style="text-align: center;">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-col>
      </el-row>
    </el-form>

    <!--单创-->
    <PopCourse v-if="popupCourseVisible" ref="popCourseUI" @selecthandler="handlecourseselect"></PopCourse>


  </el-dialog>
</template>

<script>
  import PopCourse from '@/components/PopCourse.vue';
  export default {
    components:{
      PopCourse
    },
    data() {
      return {
        dialogVisible: false,
        formData: {
          title: '',
          capacitytag: '固定人数',
          courses: [],
          teachers:[],
          room:"",
          memo:""
        },
        teacher_ids:[],
        popupCourseVisible:false,
        teachers:[
          {
            tid:1,
            name:"张老师",
            mobile:'123232'
          },
          {
            tid:2,
            name:"刘老师",
            mobile:'444444'
          }
        ],
        rules: {
          "title": [{
            message: "请填写班级名称!",
            trigger: 'blur',
            required: true
          }],
          "capacity": [{
            message: "请填写班级人数!",
            trigger: 'blur',
            required: true
          }]
        }
      }
    },

    methods: {
      loadTeachers(){
        this.api_helper.post("api/admin/educational/teacher/list_option").then(res=>{
            if(res.status==200 && res.data.code==1){
                this.teachers=res.data.list;
            }
        })
      },
      handlePopupCourse(){
         this.popupCourseVisible=true;
         this.$nextTick(()=>{
           this.$refs.popCourseUI.dialogVisible=true;
         })
      },
      handlecourseselect(list){
        this.formData.courses=[];
        console.log("选择kecheng",list);
        list.forEach((item)=>{
          console.log(item);
            this.formData.courses.push({courseid:item.courseid,type:item.type,title:item.title});
        })
      },
      handleDeleteCourse(index,data){
        this.formData.courses.splice(index,1);
      },
      init() {
         this.loadTeachers();
        this.formData = {
          title: '',
          room:'',
          courses: [],
          teachers:[],
          memo:''
        }

      },
      handleCancel() {
        this.dialogVisible = false;
      },
      handleSave() {
        this.$refs.formData.validate(ok => {
        this.formData.teachers=[];
          this.teachers.every((item)=>{
              this.teacher_ids.every((tid)=>{
                if(item.tid==tid){
                  this.formData.teachers.push({tid:tid,name:item.name});
                }
              })
          })
         const params = {
            title: this.formData.title,
            capacity: this.formData.capacity,
            courses:this.formData.courses,
            teachers:this.formData.teachers,
            room:this.formData.room,
            memo: this.formData.memo
          }

          this.api_helper.post("api/admin/educational/classname/create", params).then(res => {
            if (res.status == 200 && res.data.code == 1) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.dialogVisible = false;
              this.$emit("complete");
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
        });

      }
    }
  }
</script>

<style>
</style>
